<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/fragment::top">

</head>

<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        <div th:replace="common/fragment::leftmenu"></div>
        <!--End 左侧导航-->

        <!--头部信息-->
        <div th:replace="common/fragment::header"></div>
        <!--End 头部信息-->

        <!--页面主要内容-->
        <main class="lyear-layout-content">

            <div class="container-fluid">
                <div>
                    <!--订单-->
                    <form action="#!" class="horizontal " id="add-user-form" method="post">
                        <div class="form-group col-md-10 ">
                            <input hidden="hidden" id="sellid" th:value="${sell.id}" type="text">
                            <!--订单号-->
                            <label class="col-md-2 control-label" for="sellno"
                                   style="text-align: center;line-height: 36px">订单号</label>
                            <div class="col-md-3">
                                <input class="form-control" id="sellno" name="sellno"
                                       placeholder="订单号" readonly th:value="${sell.name}"
                                       type="text">
                            </div>
                            <!--END订单号-->
                            <!--生成日期-->
                            <label class="col-md-2 control-label" for="ctime"
                                   style="text-align: center;line-height: 36px">生成日期</label>
                            <div class="col-md-3">
                                <input class="form-control" id="ctime" name="ctime"
                                       placeholder="生成日期" readonly
                                       th:value="${#dates.format(sell.createTime, 'yyyy-MM-dd')}" type="text">

                            </div>
                            <!--END生成日期-->
                        </div>

                        <div class="form-group col-md-10 ">
                            <!--顾客-->
                            <label class="col-md-2 control-label" for="cust"
                                   style="text-align: center;line-height: 36px">顾客</label>
                            <div class="col-md-3">
                                <input hidden="hidden" id="custid" th:value="${sell.custPO.id}" type="text">
                                <input class="form-control" id="cust" name="cust"
                                       placeholder="顾客" readonly
                                       th:value="${sell.custPO.name}" type="text">
                            </div>
                            <!--END顾客-->
                            <!--要货日期-->
                            <label class="col-md-2 control-label" for="ctime"
                                   style="text-align: center;line-height: 36px">要货日期</label>
                            <div class="col-md-3">
                                <input class="form-control js-datepicker m-b-10" data-date-format="yyyy-mm-dd"
                                       disabled="disabled"
                                       id="need" name="need" placeholder="请选择日期(yyyy-mm-dd)"
                                       th:value="${#dates.format(sell.need, 'yyyy-MM-dd')}" type="text" value=""/>
                            </div>
                            <!--END要货日期-->
                        </div>
                        <!--注释-->
                        <div class="form-group col-md-10 ">
                            <label class="col-md-2 control-label" for="comment"
                                   style="text-align: center;line-height: 36px">备注</label>
                            <div class="col-md-8">
                                <input class="form-control" id="comment" name="comment"
                                       placeholder=".....备注....." readonly="readonly" type="text">
                            </div>
                        </div>
                        <!--状态-->
                        <div class="form-group col-md-10 ">
                            <label class="col-md-2 control-label" for="status"
                                   style="text-align: center;line-height: 36px;color: #ac2925">状态</label>
                            <div class="col-md-8">
                                <input class="form-control" id="status" name="status" placeholder=".....状态....."
                                       readonly="readonly" th:value="${sell_status_map[sell.status]}" type="text">
                            </div>
                        </div>

                    </form>
                    <!--END订单-->
                    <!--添加明细按钮组-->
                    <div class="form-group col-md-10">
                        <label class="col-md-2 control-label"
                               style="text-align: center;line-height: 36px">销售金额合计</label>
                        <label class="col-md-2 control-label" id="totalcomsump"
                               style="text-align: center;line-height: 36px;color: darkblue">0.0</label>
                    </div>
                    <!--生成订单按钮组-->
                    <div class="form-group col-md-10">
                        <!--END 状态下拉菜单-->
                        <div class="form-group col-xs-3">
                            <!--                            <label class="col-xs-6" for="example-select">选择框</label>-->
                            <div class="col-xs-12">
                                <select class="form-control" id="status-select" name="example-select" placeholder="状态" size="1">
                                    <option th:each="st:${sell_status_map}" th:selected="${st.key==sell.status}" th:text="${st.value}" th:value="${st.key}">
                                        选项 #1
                                    </option>

                                </select>
                            </div>
                        </div>
                        <!--END 状态下拉菜单-->
                        <button
                                class="btn btn-primary ajax-post col-md-2"
                                id="save-sell-btn"
                                target-form="add-form"
                                type="button">核实订单
                        </button>

                        <button
                                class="btn btn-default col-md-2"
                                onclick="history.back(-1);return false;"
                                type="button">返 回
                        </button>
                    </div>
                    <!--END生成订单按钮组-->
                    <!--END添加明细按钮组-->

                    <!--添加明细-->
                    <div id="detail-table">
                        <table class="table table-bordered">
                            <thead id="goodheader">
                            <tr>
                                <!--                <th>序号</th>-->
                                <th hidden="hidden">id</th>
                                <th>名称</th>
                                <!--    <th>角色图标</th>-->
                                <th>商品规格</th>
                                <!--                                            <th>包装</th>-->
                                <th>计量单位</th>
                                <th>单价</th>
                                <th>库存</th>
                                <th>数量</th>
                                <th>计价</th>
                                <th>已出库</th>
                                <!--  <th>操作</th>-->
                            </tr>
                            </thead>
                            <tbody id="selldetail">

                            <tr th:each="detail:${sell.sellDetailPOList}">
                                <td class="itemid" hidden="hidden" th:text="${detail.id}"></td>
                                <td class="itemgoodid" hidden="hidden" th:text="${detail.goodPO.id}"></td>
                                <td class="itemname" th:text="${detail.goodPO.name}"></td>
                                <td class="itemspec" th:text="${detail.goodPO.spec}"></td>
                                <td class="itemunit" th:text="${detail.goodPO.unit}"></td>
                                <td class="itemprice" th:text="${detail.price}"></td>
                                <td class="repogoodcount" th:text="${repomap[detail.goodPO.id]}"></td>
                                <td class="itemcount" th:text="${detail.goodcount}"></td>
                                <td class="itemsum" th:text="${detail.price*detail.goodcount}"></td>
                                <td class="instock" th:text="${goodmap[detail.goodPO.id]}">已出库</td>
                                <!--<td>
                                    <div class="btn-group">
                                        <a class="btn btn-xs btn-default removegood"
                                           data-toggle="tooltip"
                                           href="#" val="' + goodid + '" title="移除">
                                            <i class="mdi mdi-alert-outline"></i>\
                                        </a>
                                    </div>
                                </td>-->
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <!--END添加明细-->
                    <div class="divider"></div>
                    <div class="divider"></div>
                    <h3><span class="label label-primary" th:text="'总共'+${allselloutlist.size()}+'条出库记录'">new</span></h3>
                    <div class="divider"></div>
                    <!--手风琴效果-->
                    <th:block th:each="sellout:${allselloutlist}">
                        <div th:id="'tab'+${sellout.name}">
                            <h4>
                                <a class="subtabahref" th:href="'subtab'+${sellout.name}" th:text="'出库单: '+${sellout.name}"></a>
                                <span class="label label-default" th:text="' 出库日期:'+${#dates.format(sellout.updateTime, 'yyyy-MM-dd')}">New</span>
                            </h4>
                            <div class="sellouttab" th:id="'subtab'+${sellout.name}">
                                <table class="table table-bordered ">
                                    <thead>
                                    <tr>
                                        <th hidden="hidden">商品id</th>
                                        <th>商品名称</th>
                                        <th>商品型号</th>
                                        <!--    <th>角色图标</th>-->
                                        <th>商品规格</th>
                                        <!--                                            <th>包装</th>-->
                                        <th>出库数量</th>
                                        <!--    <th>操作</th>-->
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <!--/*@thymesVar id="sellDetailVOList" type="com.examplemartin.jpademo.pojo.vo.sell.sellDetailVO"*/-->
                                    <tr class="detail" th:each="detail:${sellout.sellOutDetailPOList}">
                                        <td class="goodid" hidden="hidden" th:text="${detail.goodPO.id}">
                                            商品id
                                        </td>
                                        <td th:text="${detail.goodPO.name}">商品名称</td>
                                        <td th:text="${detail.goodPO.spec}">商品型号</td>
                                        <!--    <th>角色图标</th>-->
                                        <td th:text="${detail.goodPO.unit}">商品规格</td>
                                        <td class="oldcount" th:text="${detail.goodcount}">出库数量</td>
                                    </tr>
                                    </tbody>

                                </table>

                            </div>
                        </div>
                    </th:block>

                    <!--手风琴效果 End-->

                </div>
            </div>
        </main>
        <!--End 页面主要内容-->
    </div>
</div>

<div th:insert="common/fragment::tail-script"></div>
<!--日期选择插件-->
<script th:src="@{/static/admin/js/bootstrap-datepicker/bootstrap-datepicker.min.js}"></script>
<link rel="stylesheet"
      th:src="@{/static/admin/js/bootstrap-datepicker/bootstrap-datepicker3.min.js}">
<link rel="stylesheet" th:href="@{/static/admin/css/style.min.css}">

<style>
    .hidesubtable {
        display: none;
    }
    .lessgood {
        color: #ac2925;
        font-weight: bolder;
        text-decoration-line: line-through;
    }
</style>

<script type="text/javascript">

    $(document).ready(function () {
// 剩余的明细条目
        let sell = null
// 剩余的明细条目
        let retainary = []
// 添加的商品
        let good = null
// 商品列表
        let vgoodlist = []

// 商品列表完整
        let vallgoodlist = []

// 要移除的商品
        let vremovalgood = null

        // 商品下拉菜单数据
        let vgoodmenulist = []

        // 明细数据
        let vdetaillist = []
        let removeid = null

// 合计订单金额
        /*        let totalcomsump = 0.0*/
        function showTotal() {
            let total = 0
            for (let i = 0; i < vdetaillist.length; i++) {
                total = total + vdetaillist[i].price * vdetaillist[i].goodcount
            }
            total = total.toFixed(2)

            $('#totalcomsump').text(total)
        }

/*// 允许添加细目
        $('#add-sell-detail-btn').click(function () {
            let sellno = $('#sellno').val()
            let ctime = $('#ctime').val()
            let need = $('#need').val()
            let cust = $('#cust').val()
            let comment = $('#comment').val()

            sell = {
                id: '',
                name: sellno,
                createTime: ctime,
                need: need,
                comment: comment,
                custPO: {id: cust}
            }

            // 验证订单条目
            if (sellno === '') {
                confirmMsg('订单好不正确')
                return false;
            }

            if (ctime === '') {
                confirmMsg('建档日期不正确')
                return false;
            }

            if (need === '') {
                confirmMsg('请选择需货日期')
                return false;
            }

            if (cust === '') {
                confirmMsg('请选择顾客')
                return false;
            }

            // 给订单设只读
            $('#sellno').attr('readonly', true)
            $('#ctime').attr('readonly', true)
            $('#need').attr('disabled', 'disabled')
            $('#cust').attr('disabled', 'disabled')
            $('#comment').attr('readonly', true)

            let data = {id: cust}

            // 通过ajax 生成 商品菜单列表列表
            $.ajax({
                type: "POST",
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                url: "/sell/getGoodlist.ajax",
                async: false,
                data: JSON.stringify(data),
                success: function (result) {
                    if (result.code === 200) {
                        vgoodlist = result.data.goodlist

                        $('#goodlist').empty()
                        let html = ''
                        for (let i = 0; i < vgoodlist.length; i++) {
                            let good = vgoodlist[i]
                            vallgoodlist.push(good)
                            vgoodmenulist.push(good)
                            html += '<option value="' + vgoodlist[i].id + '">' + vgoodlist[i].name + ' | 包装:'
                                + vgoodlist[i].spec + ' | 单位:' + vgoodlist[i].unit + '</option>'

                        }
                        $('#goodlist').append(html)

                    } else {
                        $.confirm({
                            title: '警告',
                            content: result.msg,
                            type: 'orange',
                            typeAnimated: false,
                            buttons: {
                                close: {
                                    text: '关闭',
                                }
                            }
                        });
                    }
                },
                error: function (result) {
                    console.log(result)
                    $.confirm({
                        title: '警告',
                        content: '无法链接服务器啊',
                        type: 'orange',
                        typeAnimated: false,
                        buttons: {
                            close: {
                                text: '关闭',
                            }
                        }
                    });
                }

            });
            // END ajax
            $('#detail-table').attr('hidden', false);
        });
// END允许添加细目*/

/*// 添加商品到明细
        $('#add-item-to-detail-btn').click(function () {
            if (vgoodlist == null || vgoodlist.length <= 0) {
                confirmMsg("已添加顾客的全部商品")
                return false;
            }

            let goodid = $('#goodlist').val()
            let itemcount = $('#itemcount').val()
            let itemprice = $('#itemprice').val()
            // 验证
            if (goodid === '') {
                confirmMsg('请选择商品')
                return false;
            }
            if (itemcount === '' || itemcount < 0) {
                confirmMsg('数量不正确')
                return false;
            }
            if (itemprice === '' || itemprice < 0) {
                confirmMsg('价格不正确')
                return false;
            }
            let tmpary = []
            let good = null
            // 取 商品值 生成临时数组,在原商品数组的基础上减去提取的数组
            for (let i = 0; i < vgoodlist.length; i++) {

                if (vgoodlist[i].id == goodid) {
                    good = vgoodlist[i]

                } else {
                    tmpary.push(vgoodlist[i])
                }
            }

            // 重置vgoodlist
            vgoodlist = []
            for (let i = 0; i < tmpary.length; i++) {
                vgoodlist.push(tmpary[i])
            }
            // 重置商品列表
            $('#goodlist').empty()
            let html = ''
            for (let i = 0; i < vgoodlist.length; i++) {
                html += '<option value="' + vgoodlist[i].id + '">' + vgoodlist[i].name + ' | 包装:'
                    + vgoodlist[i].spec + ' | 单位:' + vgoodlist[i].unit + '</option>'

            }
            $('#goodlist').append(html)

            html = ''
            // 打开明细标题
            $('#goodheader').attr('hidden', false)
            let itemid = good['id']
            let itemname = good['name']
            let itemspec = good['spec']
            let itemunit = good['unit']

            // 点击到明细列表
            let detail = {
                id: itemid,
                name: itemname,
                spec: itemspec,
                unit: itemunit,
                price: itemprice,
                count: itemcount
            }
            vdetaillist.push(detail)

            html += '<tr>'
            html += '<td hidden="hidden" class="itemid">' + detail.id + '</td>'
            html += '<td class="itemname">' + detail.name + '</td>'
            html += '<td class="itemspec">' + detail.spec + '</td>'
            html += '<td class="itemunit">' + detail.unit + '</td>'
            html += '<td class="itemprice">' + detail.price + '</td>'
            html += '<td class="itemcount">' + detail.goodcount + '</td>'
            html += '<td class="itemsum">' + detail.price * detail.goodcount + '</td>'
            html += ' <td>\n'
                + '                  <div class="btn-group">\n'
                + '                    <a class="btn btn-xs btn-default removegood"\n'
                + '                       data-toggle="tooltip"\n'
                + '\n'
                + '                       href="#" val="' + goodid + '" title="移除">\n'
                + '                      <i class="mdi mdi-alert-outline"></i>\n'
                + '                    </a>\n'
                + '                  </div>\n'
                + '                </td>'
            html += '</tr>'

            $('#selldetail').append(html)
            showTotal()
        });
// END添加商品到明细*/

/*// 细目中的移除按钮
        $('#selldetail').on('click', '.removegood', function (e) {
            removeid = $(this).attr('val')
            console.log("removeid = " + removeid)


            // 重新生成商品下拉列表
            for (let i = 0; i < vallgoodlist.length; i++) {
                if (vallgoodlist[i].id == removeid) {
                    vgoodlist.push(vallgoodlist[i])
                    break
                }
            }


            $('#goodlist').empty()
            let html = ''
            for (let i = 0; i < vgoodlist.length; i++) {
                html += '<option value="' + vgoodlist[i].id + '">' + vgoodlist[i].name + ' | 包装:'
                    + vgoodlist[i].spec + ' | 单位:' + vgoodlist[i].unit + '</option>'

            }
            $('#goodlist').append(html)


            // 获取明细条目 不包含要删除的
            retainary = []
            for (let i = 0; i < vdetaillist.length; i++) {
                console.log("vdetaillist[i].id=" + vdetaillist[i].id)
                console.log(" removeid=" + removeid)
                console.log(" vdetaillist[i].id==removeid = " + vdetaillist[i].id !== removeid)
                if (parseInt(vdetaillist[i].id) !== parseInt(removeid)) {
                    retainary.push(vdetaillist[i])

                }
            }
            vdetaillist = []
            for (let i = 0; i < retainary.length; i++) {
                vdetaillist.push(retainary[i])
            }


            // 重新生成明细表格
            // 如果是空表
            html = ''
            if (retainary == null || retainary.length <= 0) {
                $('#selldetail').empty()
                $('#goodheader').attr('hidden', true)
                showTotal()
                e.preventDefault()
                return false;
            } else {
                // 非空则重新生成明细表格
                for (let i = 0; i < retainary.length; i++) {
                    let itemid = retainary[i]['id']
                    let itemname = retainary[i]['name']
                    let itemspec = retainary[i]['spec']
                    let itemunit = retainary[i]['unit']
                    let itemprice = retainary[i]['price']
                    let itemcount = retainary[i]['count']

                    html += '<tr>'
                    html += '<td hidden="hidden" class="itemid">' + itemid + '</td>'
                    html += '<td class-"itemname">' + itemname + '</td>'
                    html += '<td class-"itemspec">' + itemspec + '</td>'
                    html += '<td class-"itemunit">' + itemunit + '</td>'
                    html += '<td class-"itemprice">' + itemprice + '</td>'
                    html += '<td class-"itemcount">' + itemcount + '</td>'
                    html += '<td class-"itemsum">' + itemcount * itemprice + '</td>'
                    html += ' <td>\n'
                        + '                  <div class="btn-group">\n'
                        + '                    <a class="btn btn-xs btn-default removegood"\n'
                        + '                       data-toggle="tooltip"\n'
                        + '\n'
                        + '                       href="#" val="' + itemid + '" title="移除">\n'
                        + '                      <i class="mdi mdi-alert-outline"></i>\n'
                        + '                    </a>\n'
                        + '                  </div>\n'
                        + '                </td>'
                    html += '</tr>'
                }
                $('#selldetail').empty()
                $('#selldetail').append(html)
                showTotal()
                e.preventDefault()
                return false;
            }


            e.preventDefault()
        })
// END细目中的移除按钮*/

// 货币保留2位,不小于0
        $('#itemprice').blur(function () {
            let val = parseFloat($('#itemprice').val())
            if (val == null || val == 'NaN') {
                $(this).val(0)
                return
            }

            val = val.toFixed(2)

            if (val < 0) {
                confirmMsg("输入单价有误")
            }
            $(this).val(val)

            //set the numeric value to a number input
            // $(this).value = this.value.replace(/,/g, "")
        });
//END货币保留2位

// 数量为整数,不小于0
        $('#itemcount').blur(function () {
            let val = parseInt($('#itemcount').val())

            if (val == null || val == 'NaN') {
                $(this).val(0)
                return
            }

            if (val < 0) {
                confirmMsg("输入单价有误")
            }
            $(this).val(val)

        });
//END数量为整数,不小于0

// 审核订单--转为执行中
        $('#save-sell-btn').click(function () {
            let id = $('#sellid').val()
            let status = $('#status-select').val()

            let data = {
                id: id,
                status: status
            }

            console.log(data)
            post_ajax("/sell/auditsellPO.ajax", data, "/sell/auditselllist.do")
        });
// END保存订单

// 初始化合计金额
        let selldetailsum = 0;
        $('#selldetail tr').each(function (i, e) {
            let money = $(e).children('.itemprice').text() * $(e).children('.itemcount').text()
            selldetailsum = selldetailsum + money

        })

        $('#totalcomsump').text(selldetailsum)
// END初始化合计金额

// 已出库栏处理
        // 空值 置为0 变蓝色
        $('#selldetail tr').each(function (i, e) {
            let reqNum = $(this).children('.itemcount').text()
            let instock = $(this).children('.instock').text()

            if (instock === null || instock === '') {
                $($(this).children('.instock')).text('0')
                $(this).children('.instock').css("color", 'red')
            }

            if (parseInt(reqNum) <= parseInt(instock)) {
                $(e).css('font-weight', 'bold');
                $(e).css('color', 'green')
                $(e).css('border', '1px solid black')
                $(this).children('.instock').css("color", 'deepgreen')
            }
        })
// W暗沉已出库栏处理

// 出库单 页面加载隐藏
        $('.sellouttab').each(function (i, e) {
            $(e).addClass('hidesubtable')
        });
// 出库单 页面加载隐藏

// 出库单 关闭 a标签
        $('.subtabahref').each(function (i, e) {
            $(e).click(function (event) {
                $('.sellouttab').each(function (i, e) {
                    $(e).addClass('hidesubtable')
                })

                let href = $(e).attr('href')
                $('#' + href).removeClass('hidesubtable')

                event.preventDefault();
                return false;
            })
        });
// 出库单 关闭 a标签



// 缺货 添加类 lessgood 行显示红色
        $('#selldetail tr').each(function (i, e) {
            let tmprepogoodcount = $(e).children('.repogoodcount').text()
            let tmpitemcount = $(e).children('.itemcount').text()
            if (parseInt(tmprepogoodcount) < parseInt(tmpitemcount)) {
                $(this).addClass('lessgood')
            } else {
                $(this).removeClass('lessgood')
            }

        })
//END 缺货 添加类 lessgood 行显示红色
    });

</script>
</body>
</html>